<template>
  <div id="app">
    <h1 v-color="color1">值</h1>
    <h1 v-color="color2">值</h1>
  </div>
</template>
<style>

</style>
<script>
export default {
  data(){
    return {
      color1:'red',
      color2:'green'
    }
  },
  directives:{
    color:{
      //inserted 提供的是元素被添加到页面的逻辑 但是没有更改变量 页面变
      inserted(el,binding){
       //binding.value 就是指令的值
        el.style.color = binding.value
      },
      //update 是指令的值修改时触发 提供值变化后 dom更新的逻辑
      update(el,binding){
        el.style.color=binding.color
      }
    }
  }
}
</script>